<template>
  <div style="width: 100%;height: 100%;">
    <div id="map" style="width: 100%;height: 100%;"></div>
    <div style="position: absolute;bottom: 0 ;left: 0 ;background-color: rgba(255,255,255,0.6);z-index: 10000;min-width: 150px;padding: 10px;display: flex;flex-direction: column;align-items: flex-start">
      图例（水库类型）
      <div ><img :src="imgUrlRed" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">>大型</div></div>
      <div ><img :src="imgUrlYel" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">中型</div></div>
      <div><img :src="imgUrlGreen" style="width: 30px;display: inline-block;float: left;"><div style="line-height: 30px;float: left;margin-left: 10px;">小Ⅰ型</div></div>

    </div>
  </div>

</template>

<script>
  import L from "leaflet";
  import API from "../../api/api_common_b";


  export default {
    name: "WaterMap",
    data() {
      return {
        imgUrlGreen:require("../../../static/qizigreen.png"),
        imgUrlRed:require("../../../static/qizired.png"),
        imgUrlYel:require("../../../static/qiziye.png"),
        jsonUrl:require("../../../static/waterbase.json"),
          map: null,
        loading: false,
        tableData: []
      }
    },
    mounted() {
      this.getData();
      this.initMap();
    },
    methods: {
      initMap() {
        let map = L.map("map", {
          minZoom: 1,
          maxZoom: 14,
          center: [42.324, 121.898],
          zoom: 10,
          zoomControl: false,
          preferCanvas: true,
          attributionControl: false,
          crs: L.CRS.EPSG3857
        });
        this.map = map; //data上需要挂载
        let now = new Date();
        let hour = now.getHours();
        if (hour < 18) {
          L.tileLayer(
            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}"
          ).addTo(map);
        } else {
          L.tileLayer(
            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
          ).addTo(map);
        }
        this.addJson()
      },

      addJson() {
         let  myIconRed = L.icon({
             iconUrl: this.imgUrlRed,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconYel = L.icon({
             iconUrl: this.imgUrlYel,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });let  myIconGreen = L.icon({
             iconUrl: this.imgUrlGreen,
             iconSize: [20, 20],
             iconAnchor: [2, 20],
             popupAnchor: [10, -20]
         });
         for (let i = 0; i < this.jsonUrl.features.length; i++) {
          let feture=this.jsonUrl.features[i];
          let num=feture.properties["站码"];

          feture.properties.rz="未查询到";
          feture.properties.other="未查询到";
          feture.properties.time="未查询到";
          for (let j = 0; j < this.tableData.length; j++) {
            if(num==this.tableData[j].STCD){
              feture.properties.rz=this.tableData[j].RZ;
              feture.properties.other=this.tableData[j].OTHER;
              feture.properties.time=this.tableData[j].TM;
              break;
            }
          }
         }
          L.geoJSON(this.jsonUrl, {
            pointToLayer: function(feature, latlng) {
              if(feature.properties["水库类型"]=="大型"){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconRed
                });
              }else if(feature.properties["水库类型"]=="中型"){
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconYel
                });
              }
              else {
                return L.marker(latlng,{
                  title:feature.properties["站名"],
                  icon:myIconGreen
                });
              }
            }
          }).bindPopup(function(layer) {
            return "<span class='bold'>"+layer.feature.properties["站名"]+"("+layer.feature.properties["水库类型"]+")"+"</span><br/>"
            +"水位："+layer.feature.properties.rz+"<br/>"
            +"超警："+layer.feature.properties.other+"<br/>"
            ;
          }).addTo(this.map);


      },
      getData() {
       this.tableData=JSON.parse(localStorage.getItem("datab"));
      },
    }
  }
</script>

<style>
.bold{
  font-weight: bold;
}
</style>
